<template>
    <div class="largeScreen-5">
        <div class="largeScreen-5-title"><span class="gradient-text">服务运转分析</span></div>
        <div class="top" style="width: 100%;height:60%;">
            <div id="largeScreen-5" style="width: 100%;height:100%;"></div>
        </div>
        <div class="items" style="width: 100%;height:30%;display: flex;justify-content: center;">
            <div class="item">
                <div id="pie1" style="width: 100%;height:90%;"></div>
                <div class="title">24小时发货率</div>
            </div>
            <div class="item">
                <div id="pie2" style="width: 100%;height:90%;"></div>
                <div class="title">48小时发货率</div>
            </div>
            <!-- <div class="item">
                <div id="pie3" style="width: 100%;height:90%;"></div>
                <div class="title">120小时开票率</div>
            </div>
            <div class="item">
                <div id="pie4" style="width: 100%;height:90%;"></div>
                <div class="title">240小时开票率</div>
            </div> -->
        </div>
        <div class="go_remark" @click="go_remark"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            data: {}
        };
    },
    methods: {
        go_remark() {
            window.open(`https://api.gygsjcpt.cn/admin/FeedBack/lists.html?is_viz=1`, '_blank')
        },
        async getIndexData() {
            const res = await this.$axios.get('https://api.gygsjcpt.cn/api/visualization1/data_8')
            this.data = res.data.data
        },
        init() {
            var myChart = echarts.init(document.getElementById('largeScreen-5'));
            let data1 = [[this.data.finsh_percent, this.data.shipping_percent_24, this.data.goods_audit_precent, this.data.feed_back_reply_percent, this.data.goods_percent]];

            function contains(arr, val) {
                var i = arr.length;
                while (i--) {
                    if (arr[i].name === val) {
                        return i;
                    }
                }
                return false;
            }
            let indicator = [{
                name: '订单完成率',
            },
            {
                name: '发货准时率',
            },
            {
                name: '商品审核率',
            },
            {
                name: '反馈答复率',
            },
            {
                name: '商品好评率',
            }];

            // 分割线颜色
            let splitColor = '#08335d';
          const  option = {
                tooltip: {
                    show: false // 弹层数据去掉
                },
                legend: {
                    show: false,
                },
                radar: {
                    center: ['50%', '55%'], // 外圆的位置
                    radius: '65%',
                    name: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        },
                        formatter: (a) => {
                            let i = contains(indicator, a); // 处理对应要显示的样式
                            return ` ${a}\n ${data1[0][i]}%  `;
                        },
                    },
                    // TODO:
                    indicator: [
                        {
                            name: '订单完成率',
                            max: 100
                        },
                        {
                            name: '发货准时率',
                            max: 100
                        },
                        {
                            name: '商品审核率',
                            max: 100
                        },
                        {
                            name: '反馈答复率',
                            max: 100
                        },
                        {
                            name: '商品好评率',
                            max: 100
                        }
                    ],
                    splitArea: {
                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                        show: true,
                        areaStyle: {
                            // 分隔区域的样式设置。
                            color: ['#131C3400'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                        }
                    },
                    axisLine: {
                        // 指向外圈文本的分隔线样式
                        lineStyle: {
                            color: splitColor
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'solid',
                            color: splitColor, // 分隔线颜色
                            width: 1 // 分隔线线宽
                        }
                    }
                },
                series: [
                    {
                        type: 'radar',
                        data: [

                            {
                                value: [this.data.finsh_percent, this.data.shipping_percent_24, this.data.goods_audit_precent, this.data.feed_back_reply_percent, this.data.goods_percent],
                                name: '预警',
                                areaStyle: {
                                    normal: {
                                        color: {
                                            type: 'radial',
                                            x: 0.5,
                                            y: 0.5,
                                            r: 0.5,
                                            colorStops: [{
                                                offset: 0, color: 'rgba(0,194,255, 0.4)' // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.15, color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                                            },
                                            {
                                                offset: 0.75, color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                                            },
                                            {
                                                offset: 1, color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                                            }],
                                            global: false // 缺省为 false
                                        }
                                    }
                                },
                                symbolSize: [6, 6],
                                lineStyle: { //边缘颜色
                                    //  width: 0
                                    color: 'rgba(0, 194, 255, 1)',
                                    // shadowBlur:8,
                                    // shadowColor:'#ff3838'
                                },
                                itemStyle: {
                                    color: '#fff',
                                    borderColor: '#00c8ff',
                                    borderWidth: 2,
                                    shadowBlur: 8,
                                    shadowColor: '#00c8ff'
                                },
                            },
                        ]
                    }
                ]
            }
            myChart.setOption(option);
        },
        init1() {
            var myChart = echarts.init(document.getElementById('pie1'));
            var data = {
                name: '24小时发货率',
                value: [this.data.shipping_percent_24],
            };

            const option = {
                //你的代码
                title: {
                    text: data.value[0] + '%',
                    textStyle: {
                        color: '#8765e6',
                        fontSize: 16
                    },
                    // subtext: '采购入库进度',
                    subtextStyle: {
                        color: '#333D46',
                        fontSize: 14,
                    },
                    itemGap: 10,
                    left: 'center',
                    top: 'center'
                },
                tooltip: {
                    formatter: function (params) {
                        return (
                            '<span style="color: #000;">24小时发货率：' + params.value + '%</span>'
                        );
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false,
                    startAngle: 180
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'], //中心点位置
                        radius: '150%' //图形大小
                    }
                ],
                series: [
                    {
                        stack: 'round',
                        type: 'bar',
                        z: 1,
                        data: data.value,
                        showBackground: false,
                        backgroundStyle: {
                            color: 'blue',
                            borderWidth: 30,
                            width: 12
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 16, //大的占比环
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(125, 94, 213)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(125, 94, 213)'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#rgba(125, 94, 213)'
                            }
                        }
                    },
                    {
                        stack: 'round',
                        z: 11,
                        type: 'bar',
                        data: [0.01],
                        showBackground: false,
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 0.01,
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#FFF',
                            borderWidth: 0.01,
                        },
                    },
                    {
                        type: 'pie',
                        name: '内层细圆环',
                        radius: ['65%', '80%'],
                        startAngle: 180,
                        hoverAnimation: false,
                        clockWise: true,
                        itemStyle: {
                            normal: {
                                color: 'rgba(125, 94, 213,.2)'
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }
                ]
            };

            myChart.setOption(option);
        },
        init2() {
            var myChart = echarts.init(document.getElementById('pie2'));
            var data = {
                name: '48小时发货率',
                value: [this.data.shipping_percent_48],
            };

            const option = {
                //你的代码
                title: {
                    text: data.value[0] + '%',
                    textStyle: {
                        color: '#12a5ed',
                        fontSize: 16
                    },
                    // subtext: '采购入库进度',
                    subtextStyle: {
                        color: '#333D46',
                        fontSize: 14,
                    },
                    itemGap: 10,
                    left: 'center',
                    top: 'center'
                },
                tooltip: {
                    formatter: function (params) {
                        return (
                            '<span style="color: #000;">48小时发货率：' + params.value + '%</span>'
                        );
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false,
                    startAngle: 180
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'], //中心点位置
                        radius: '150%' //图形大小
                    }
                ],
                series: [
                    {
                        stack: 'round',
                        type: 'bar',
                        z: 1,
                        data: data.value,
                        showBackground: false,
                        backgroundStyle: {
                            color: 'blue',
                            borderWidth: 30,
                            width: 12
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 16, //大的占比环
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(18, 161, 231)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(18, 161, 231)'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#rgba(18, 161, 231)'
                            }
                        }
                    },
                    {
                        stack: 'round',
                        z: 11,
                        type: 'bar',
                        data: [0.01],
                        showBackground: false,
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 0.01,
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#FFF',
                            borderWidth: 0.01,
                        },
                    },
                    {
                        type: 'pie',
                        name: '内层细圆环',
                        radius: ['65%', '80%'],
                        startAngle: 180,
                        hoverAnimation: false,
                        clockWise: true,
                        itemStyle: {
                            normal: {
                                color: 'rgba(18, 161, 231,.2)'
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }
                ]
            };

            myChart.setOption(option);
        },
        init3() {
            var myChart = echarts.init(document.getElementById('pie3'));
            var data = {
                name: '120小时开票率',
                value: [this.data.invoice_percent_120],
            };

            const option = {
                //你的代码
                title: {
                    text: data.value[0] + '%',
                    textStyle: {
                        color: '#25ae47',
                        fontSize: 16
                    },
                    // subtext: '采购入库进度',
                    subtextStyle: {
                        color: '#333D46',
                        fontSize: 14,
                    },
                    itemGap: 10,
                    left: 'center',
                    top: 'center'
                },
                tooltip: {
                    formatter: function (params) {
                        return (
                            '<span style="color: #000;">120小时开票率：' + params.value + '%</span>'
                        );
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false,
                    startAngle: 180
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'], //中心点位置
                        radius: '150%' //图形大小
                    }
                ],
                series: [
                    {
                        stack: 'round',
                        type: 'bar',
                        z: 1,
                        data: data.value,
                        showBackground: false,
                        backgroundStyle: {
                            color: 'blue',
                            borderWidth: 30,
                            width: 12
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 16, //大的占比环
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(37, 174, 71)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(37, 174, 71)'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#rgba(37, 174, 71)'
                            }
                        }
                    },
                    {
                        stack: 'round',
                        z: 11,
                        type: 'bar',
                        data: [0.01],
                        showBackground: false,
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 0.01,
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#FFF',
                            borderWidth: 0.01,
                        },
                    },
                    {
                        type: 'pie',
                        name: '内层细圆环',
                        radius: ['65%', '80%'],
                        startAngle: 180,
                        hoverAnimation: false,
                        clockWise: true,
                        itemStyle: {
                            normal: {
                                color: 'rgba(37, 174, 71,.2)'
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }
                ]
            };

            myChart.setOption(option);
        },
        init4() {
            var myChart = echarts.init(document.getElementById('pie4'));
            var data = {
                name: '240小时开票率',
                value: [this.data.invoice_percent_240],
            };

            const option = {
                //你的代码
                title: {
                    text: data.value[0] + '%',
                    textStyle: {
                        color: '#e0bd23',
                        fontSize: 16
                    },
                    // subtext: '采购入库进度',
                    subtextStyle: {
                        color: '#333D46',
                        fontSize: 14,
                    },
                    itemGap: 10,
                    left: 'center',
                    top: 'center'
                },
                tooltip: {
                    formatter: function (params) {
                        return (
                            '<span style="color: #000;">240小时开票率：' + params.value + '%</span>'
                        );
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false,
                    startAngle: 180
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'], //中心点位置
                        radius: '150%' //图形大小
                    }
                ],
                series: [
                    {
                        stack: 'round',
                        type: 'bar',
                        z: 1,
                        data: data.value,
                        showBackground: false,
                        backgroundStyle: {
                            color: 'blue',
                            borderWidth: 30,
                            width: 12
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 16, //大的占比环
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(224, 189, 35)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(224, 189, 35)'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#rgba(224, 189, 35)'
                            }
                        }
                    },
                    {
                        stack: 'round',
                        z: 11,
                        type: 'bar',
                        data: [0.01],
                        showBackground: false,
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 0.01,
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#FFF',
                            borderWidth: 0.01,
                        },
                    },
                    {
                        type: 'pie',
                        name: '内层细圆环',
                        radius: ['65%', '80%'],
                        startAngle: 180,
                        hoverAnimation: false,
                        clockWise: true,
                        itemStyle: {
                            normal: {
                                color: 'rgba(224, 189, 35,.2)'
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    }
                ]
            };

            myChart.setOption(option);
        },

    },
    async mounted() {
        await this.getIndexData()
        this.init();
        this.init1();
        this.init2();
        this.init3();
        this.init4();
    },
    watch: {

    }
};
</script>

<style lang="scss" scoped>
.go_remark{
    width: 200px;
    height: 100px;
    position: absolute;
    right: 20%;
    bottom: 35%;
    cursor: pointer;
}
.largeScreen-5 {
    position: relative;
    height: 100%;
    background: linear-gradient(to bottom, #05133b30 0%, #00206f30 100%);

    .largeScreen-5-title {
        color: #fff;
        height: 9%;
        font-size: 17px;
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        padding-left: 10%;
        background: url('https://api.gygsjcpt.cn/pcimg/title_bg_long.png');
        background-size: 100% 100%;
    }

    .items {
        width: 100%;
        display: flex;

        .item {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-size: 14px;
        }
    }


}
</style>